import React from 'react';
import {
    Row,
    Col,
    Icon,
    Card,
    Timeline,
    notification,
    AutoComplete,
    Table
} from 'antd';
import CountUp from 'react-countup';
import classnames from 'classnames';
import axios from 'axios';
import intercept from '../../utils/intercept';
import { config } from 'utils';
import './less/common.less'

export default class StationInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            stationinfo: '',
            keyword: '',
            stations: [],
            daysells:''
        };
    };
    componentDidMount() {
        this.getStationInfo('');
    };
    search = (value) => {
        console.log(value);
        this.setState({ keyword: value });
        this.getStationInfo(value);
    }
    getStationInfo = (globalcode) => {
        const token = sessionStorage.getItem("token");
        axios.get(`${config.api}DailyStatics/GetStationInfo?globalcode=${globalcode}`, { headers: { Authorization: 'Bearer ' + token } }).then((res) => {
            console.log(res.data);
            if (res.data.result) {
                this.setState({
                    stationinfo: res.data.stationInfo,
                    stations: res.data.stations,
                    daysells:res.data.daySells
                })
            }
            else {
                this.openNotification('获取车站信息失败', res.data.errorMessage, 'red');
                this.setState({
                    stations: res.data.stations
                })
            }
        })
        .catch(err => {
            intercept;
        })
    }
    openNotification = (title, desc, color) => {
        notification.open({
            message: title,
            description: desc,
            icon: <Icon type="smile-circle" style={{ color: color }} />,
        });
    };
    render() {
        const figurecard = [
            {
                icon: 'book',
                title: '汽车票',
                number: 184,
                color: 'green',
                sub: 'Get More Space...',
                subIcon: 'info-circle'
            }, {
                icon: 'eye-o',
                title: '定制客运',
                number: 75,
                color: 'pink',
                sub: 'Google Analytics',
                subIcon: 'tag'
            }, {
                icon: 'bank',
                title: '城际约租',
                number: 3245,
                color: 'blue',
                sub: 'Last 24 Hours',
                subIcon: 'calendar'
            }
        ];
        const column = [
            {
                title: '日期',
                dataIndex: 'sellDate',
            }, {
                title: '分销商',
                dataIndex: 'traderAccount',
            }, {
                title: '售票数',
                dataIndex: 'totalAmount',
            }, {
                title: '售票款',
                dataIndex: 'totalMoney',
            }
        ];
        const models = ['老接口', '新接口', '国标接口']
        return (
            <div>
                <div
                    style={{
                        textAlign: 'center',
                        margin: 10
                    }}>
                    <AutoComplete
                        style={{
                            width: 600
                        }}
                        onSelect={this.search}
                        dataSource={this.state.stations}
                        filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} />

                </div>
                <div>
                    <Row gutter={16} className="showcase-1">
                        {
                            figurecard.map((v, k) => {
                                return (
                                    <Col xs={24} sm={24} md={12} lg={6} xl={6} key={k}>
                                        <Card
                                            title={
                                                <div>
                                                    <div className={classnames('card-header', { [`${v.color}`]: true })}>
                                                        <h4><Icon type={v.icon} /></h4>
                                                    </div>
                                                    <div className={'card-content'}>
                                                        <p className={'category'}>{v.title}</p>
                                                        <h3>
                                                            <CountUp
                                                                start={0}
                                                                end={v.number}
                                                                duration={2.75}
                                                                useEasing
                                                                useGrouping
                                                                separator=","
                                                            />
                                                        </h3>
                                                    </div>
                                                </div>}
                                            bordered={false}
                                            noHovering>
                                            <div className={'card-footer'}>
                                                <Icon type={v.subIcon} />
                                                {' '}{v.sub}
                                            </div>
                                        </Card>
                                    </Col>
                                )
                            })
                        }
                    </Row>
                </div>
                <div style={{ background: '#ECECEC', padding: '30px' }}>
                    <Row gutter={16}>
                        <Col span={6}>
                            <Card title={this.state.stationinfo.shortname} bordered={false}>
                                <Timeline>
                                    <Timeline.Item>车站名称：{this.state.stationinfo.shortname}</Timeline.Item>
                                    <Timeline.Item>接口类型：{models[this.state.stationinfo.model]}</Timeline.Item>
                                    <Timeline.Item>是否售票：{this.state.stationinfo.isAllow ? '售' : '不售'}</Timeline.Item>
                                    <Timeline.Item>接口地址：{this.state.stationinfo.interfaceUrl}</Timeline.Item>
                                    <Timeline.Item>车站编码：{this.state.stationinfo.globalcode}</Timeline.Item>
                                    <Timeline.Item>车站地址：{this.state.stationinfo.address}</Timeline.Item>
                                    <Timeline.Item>车站电话：{this.state.stationinfo.phones}</Timeline.Item>
                                    <Timeline.Item>是否退票：{this.state.stationinfo.isRefund ? '支持在线退票' : '不支持在线退票'}</Timeline.Item>
                                    <Timeline.Item>取票方式：{this.state.stationinfo.printtype}</Timeline.Item>
                                </Timeline>
                            </Card>
                        </Col>
                        <Col span={18}>
                            <Card title="每日数据" bordered={false}>
                            <Table
                            rowKey={record => record.key}
                            className='center'
                            columns={column}
                            dataSource={this.state.daysells}
                            pagination={false}
                            loading={this.state.loading}
                            size="small" />
                            </Card>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}